<template>
<!-- 登录页面 -->
  <div class="login">
    <div class="login_box">
        <!-- 头像区域 -->
        <div class="login_img">
            <img src="../assets/logo.png" alt="">
        </div>
        <!-- 账户区域 -->
        <el-form :model="userform" :rules="rules" ref="ruleFormref" label-width="80px" class="login_from">
            <el-form-item label="用户名" prop="username">
                <el-input v-model="userform.username"></el-input>
            </el-form-item>
            <el-form-item label="昵称" prop="nikiname">
                <el-input v-model="userform.nikiname"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input type="password" v-model="userform.password"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="passwords">
                <el-input type="password" v-model="userform.passwords"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
                <el-input v-model="userform.email"></el-input>
            </el-form-item>
            <!-- 按钮 -->
            <el-form-item class="login_button">
                <el-button type="primary" @click='registers'>注册</el-button>
                <el-button type="info" @click='clear'>重置</el-button>
            </el-form-item> 
            <el-row class="reguire">
               <span>已有账号？</span> <el-link @click="login" type="primary">去登录</el-link>
            </el-row>           
        </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: 'register',
  data(){
      var checkage=(rule,value,callback)=>{
          var reg=/^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/
          if(reg.test(value)){
              return callback()
          }
          callback(new Error('请输入合法的邮箱'))
      }
    var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        }
          callback();
      };
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.userform.password) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      return{
          userform:{
              username:'',
              password:'',
              nikiname:'',
              email:'',
              passwords:''
          },
        //   验证规则.
        rules:{
            username:[
                {required:true,message:'请输入用户名',trigger:'blur'},
                {min:2,max:16,message:'长度在2-16个字符',trigger:'blur'}
            ],
            password:[
                {validator:validatePass,trigger:'blur'},
                {min:6,max:16,message:'长度在6-16个字符',trigger:'blur'}
            ],
            passwords:[
                {validator:validatePass2,trigger:'blur'},
                {min:6,max:16,message:'长度在6-16个字符',trigger:'blur'}
            ],
            nikiname:[
                {required:true,message:'请输入昵称',trigger:'blur'},
                {min:1,max:12,message:'长度在1-12个字符',trigger:'blur'}
            ],
            email:[
                {validator:checkage,trigger:'blur'},
            ]
        }
      }
  },
  methods:{
    //   注册按钮
    registers(){
        this.$refs.ruleFormref.validate(valid=>{
            if(!valid) return
            this.$axios.post('/users/getuser',{username:this.userform.username}).then(res=>{
                if(res.data.list) return this.$message.error('用户名已存在')
                this.$axios.post("/users/register", {
                username:this.userform.username,
                password:this.userform.password,
                nikiname:this.userform.nikiname,
                email:this.userform.email
                }).then(res => {
                    if(res.data.list=='') return this.$message.error('注册失败')
                    this.$message.success('注册成功')
                    this.$router.push('/login')
                })

            })
        })

    },
    // 重置表单
    clear(){
        this.$refs.ruleFormref.resetFields()
    },
    // 未注册，去注册
    login(){
        this.$router.push('/login')
    }
  }
}
</script>

<style lang="less" scoped>
.login{
    width: 100%;
    height: 100%;
    background: #2b4d6e;
}
.login_box{
    width: 500px;
    height: 550px;
    background: #fff;
    border-radius: 3px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    .login_img{
        width: 130px;
        height: 130px;
        border: 1px solid #eee;
        border-radius: 50%;
        overflow: hidden;
        padding: 10px;
        box-sizing: border-box;
        position: absolute;
        left: 50%;
        top: 0;
        transform: translate(-50%,-25%);
        img{
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background: #ccc;
        }
    }
}
.login_from{
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    bottom: 40px;
    padding: 0 20px;
    box-sizing: border-box;
    .login_button{
        text-align: right;
    }
    .reguire{
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        span{
            font-size: 14px;
        }
    }
}
</style>
